<template>
  <div class="deviceContainer" id="id_deviceContainer">
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {getAllEquipInfo} from '/@/api/visualizing/master'
import lodash from 'lodash'
import {onMounted, ref,shallowRef,defineExpose} from 'vue'
export default {
  setup(){
      const myChart = shallowRef(null);
      const totalAll = ref(0);
      const totalRun = ref(0);
      const totalStop = ref(0);
      const totalfault = ref(0);
      const totalDown = ref(0);
      const setBarCharts = ()=>{
      const options = {
        // 设置图表的选项
        // width: "90%",
        // height: "90%",
        grid: {
          x: 20, // 距离容器左边的距离
          y: 40, // 距离容器上边的距离
          x2: 30, // 距离容器右边的距离
          y2: 20, // 距离容器下边的距离
        },
        // 设置图表的网格样式，即图表距禒容器四边的距禒

        xAxis: {
          type: "value", // x 轴类型为数值型
          show: false, // 不显示 x 轴
        },
        // 设置图表的 x 轴的类型为数值型，并且不显示 x 轴

        tooltip: {
          trigger: "axis", // 触发类型为坐标轴触发
          axisPointer: {
            type: "shadow", // 指示器类型为阴影
          },
        },
        // 配置图表的提示框，当鼠标悬浮在数据点上时显示信息

        yAxis: {
          type: "category", // y 轴类型为类目型
          axisLabel: { show: false }, // 不显示刻度标签
          data: [], // 使用传入的数据作为轴数据
          splitLine: {
            show: false, // 不显示分隔线
          },
          axisLine: {
            show: false, // 不显示坐标轴轴线
          },
          axisTick: {
            show: false, // 不显示刻度线
          },
        },
        // 设置图表的 y 轴的类型为类目型，不显示刻度标签，使用传入的数据作为轴数据，同时不显示分隔线、坐标轴轴线和刻度线
        series: [
          {
            type: "bar", // 类型为柱状图
            data: [totalAll.value, totalAll.value, totalAll.value, totalAll.value], // 数据
            barWidth: "10px", // 柱条宽度
            barGap: "-100%", // 柱条间距
            itemStyle: {
              barBorderRadius: 10, // 柱条圆角
              color: "#110c44", // 柱条颜色
            },
          },
          // 这个配置项用来设置图表的背景进度条，数据直接全用了 100
          {
            type: "bar",
            itemStyle: {
              barBorderRadius: 10,
              color: {
                type: "linear",
                x: 0, // 渐变起始点 x 坐标，取值范围为 0 - 1
                y: 0, // 渐变起始点 y 坐标，取值范围为 0 - 1
                x2: 1, // 渐变结束点 x 坐标，取值范围为 0 - 1
                y2: 0, // 渐变结束点 y 坐标，取值范围为 0 - 1
                colorStops: [
                  {
                    offset: 0, // 渐变颜色起始位置的偏移量，取值范围为 0 - 1
                    color: "#143787", // 起始颜色
                  },
                  {
                    offset: 1, // 渐变颜色结束位置的偏移量，取值范围为 0 - 1
                    color: "#12FF3F", // 结束颜色
                  },
                ],
              },
            },
            data: [
              {name:`离线数(${totalDown.value})`, value:totalDown.value, itemStyle: {
              barBorderRadius: 10,
              color: {
                type: "linear",
                x: 0, // 渐变起始点 x 坐标，取值范围为 0 - 1
                y: 0, // 渐变起始点 y 坐标，取值范围为 0 - 1
                x2: 1, // 渐变结束点 x 坐标，取值范围为 0 - 1
                y2: 0, // 渐变结束点 y 坐标，取值范围为 0 - 1
                colorStops: [
                  {
                    offset: 0, // 渐变颜色起始位置的偏移量，取值范围为 0 - 1
                    color: "rgba(0,15,255,0)", // 起始颜色
                  },
                  {
                    offset: 1, // 渐变颜色结束位置的偏移量，取值范围为 0 - 1
                    color: "#FFFFFF", // 结束颜色
                  },
                ],
              },
            }},
            {name:`故障数(${totalfault.value})`, value:totalfault.value, itemStyle: {
              barBorderRadius: 10,
              color: {
                type: "linear",
                x: 0, // 渐变起始点 x 坐标，取值范围为 0 - 1
                y: 0, // 渐变起始点 y 坐标，取值范围为 0 - 1
                x2: 1, // 渐变结束点 x 坐标，取值范围为 0 - 1
                y2: 0, // 渐变结束点 y 坐标，取值范围为 0 - 1
                colorStops: [
                  {
                    offset: 0, // 渐变颜色起始位置的偏移量，取值范围为 0 - 1
                    color: "rgba(112,20,82,0)", // 起始颜色
                  },
                  {
                    offset: 1, // 渐变颜色结束位置的偏移量，取值范围为 0 - 1
                    color: "#A41B68", // 结束颜色
                  },
                ],
              },
            }
            },
            {name:`停止数(${totalStop.value})`, value:totalStop.value, itemStyle: {
              barBorderRadius: 10,
              color: {
                type: "linear",
                x: 0, // 渐变起始点 x 坐标，取值范围为 0 - 1
                y: 0, // 渐变起始点 y 坐标，取值范围为 0 - 1
                x2: 1, // 渐变结束点 x 坐标，取值范围为 0 - 1
                y2: 0, // 渐变结束点 y 坐标，取值范围为 0 - 1
                colorStops: [
                  {
                    offset: 0, // 渐变颜色起始位置的偏移量，取值范围为 0 - 1
                    color: "#143787", // 起始颜色
                  },
                  {
                    offset: 1, // 渐变颜色结束位置的偏移量，取值范围为 0 - 1
                    color: "#F3DB5C", // 结束颜色
                  },
                ],
              },
            }},
            {name:`运行数(${totalRun.value})`, value:totalRun.value, itemStyle: {
              barBorderRadius: 10,
              color: {
                type: "linear",
                x: 0, // 渐变起始点 x 坐标，取值范围为 0 - 1
                y: 0, // 渐变起始点 y 坐标，取值范围为 0 - 1
                x2: 1, // 渐变结束点 x 坐标，取值范围为 0 - 1
                y2: 0, // 渐变结束点 y 坐标，取值范围为 0 - 1
                colorStops: [
                  {
                    offset: 0, // 渐变颜色起始位置的偏移量，取值范围为 0 - 1
                    color: "#143787", // 起始颜色
                  },
                  {
                    offset: 1, // 渐变颜色结束位置的偏移量，取值范围为 0 - 1
                    color: "#12FF3F", // 结束颜色
                  },
                ],
              },
            }}],
            barWidth: "10px",
            barGap: "-100%", //设置柱形重合的重要步骤
            label: {
              color: "#4ADEFE",
              show: true,
              formatter: "{b}",
              position: "left",
              align: "left",
              fontSize:15,
              offset: [10, -20],
            },
          },
          // 这个配置项用来设置实际数据的柱形条，并设置了颜色、宽度、间距和左侧标签的样式
        ],
      }
      if (!myChart.value) 
      myChart.value = echarts.init(document.getElementById('id_deviceContainer'));
      myChart.value.setOption(options);
    }
    const getAllEquipInfoData = async ()=>{
      const res = await getAllEquipInfo()
      totalAll.value = lodash.get(res, 'data.total', 0)
      totalRun.value = lodash.get(res, 'data.run', 0)
      totalStop.value = lodash.get(res, 'data.stop', 0)
      totalfault.value = lodash.get(res, 'data.fault', 0)
      totalDown.value = lodash.get(res, 'data.down', 0)
      setBarCharts();
    }
    const resize = ()=>{
      myChart.value && myChart.value.resize();
    }
    defineExpose({resize});
    onMounted(()=>{
      getAllEquipInfoData()
      setInterval(() => {
        getAllEquipInfoData()
      }, 1000*5)
    })
    return {
      resize,
      totalAll,
      totalRun,
      totalStop,
      totalfault,
      totalDown,
      myChart
    }
  }
}
</script>
<style lang="less" scoped>
.deviceContainer {
  // height: 260px;
  width: 100%;
  height: 80%;
}
</style>